<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .class2 {
            color: red;
        }
    </style>
</head>
<body>


<span class="span1">
    {{name}}
    {{age}}
    {{school}}
</span>


<!--v-html 输出html代码-->
<div class="div1">
    {{rawHtml}}
</div>


<!--这里将div的内容传给了rawHtml-->
<div class="div2" v-html="rawHtml">
    <span> 55555 </span>
</div>
<div class="div3" v-html="massage">

</div>


<!--绑定属性:class2 如果use的值为true,则使用class2属性-->
<div v-bind:class="{'class2':use}" id="zyd666">
    llalalalaa
</div>


<div class="div5">

    {{ 5+5 }}
    <br>
    {{msg? 'ignb!!':'ig lj'}}
    <br>
    {{massage}}
    <br>
    {{massage.split('').reverse().join('')}}
</div>


<div class="div6" v-if="show">
    {{massage}}
</div>

<div class="div7">
    <a v-bind:href="url">百度一下</a>
</div>

<div class="div8" style="color: pink" v-on:click="func2">
    {{massage}}
</div>
<div class="div9">
    <input type="text" v-model="value">
    <!--    这里面,input输入的值会和vue实例中的value值同步,-->
    <br>
    {{value}}
    <br>
    响应式更新信息
</div>

<!--点击按钮实现字符串反转-->
<div class="div10">
    <input type="text" v-model="value">
<!--    <button v-on:click="func3">点我反转字符串</button>-->
<!--    简化写法-->
    <button @click="func3">点我反转字符串</button>
    {{ value }}
</div>

<div class="div11">
    {{value | fif}}
</div>

</body>
<script src="../lib/vue.js"></script>
<script>
    /*
    * Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
    * 所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
    * 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，
    * 并把 DOM 操作次数减到最少。
    * */

    //  1. 文本插入
    vue_obj1 = new Vue({
        el: '.span1',
        data: {
            name: '张业頔',
            age: 18,
            school: 'Tust'
        }
    })

    // 2.v-html
    new Vue({
        el: '.div3',
        data: {
            massage: 'zyd123456'
        }
    })

    // 3.v-bind  html属性的值
    new Vue({
        el: '#zyd666',
        data: {
            use: true //use 的值直接影响上面的div是否使用哪个类的样式
        }
    })

    //4. js表达式支持

    new Vue({
        el: '.div5',
        data: {
            massage: 'hello word',
            msg: true,
        },
    })


    // 5. v-if 条件判断
    new Vue({
        el: '.div6',
        data: {
            show: true,
            massage: '你现在看到我了',
        }
    })

    // 6. 参数
    // 参数可以在指令的冒号之后指定,例如
    new Vue({
        el: '.div7',
        data: {
            url: 'http://www.hao123.com'
        }
    })

    // 7.v-on 监听dom事件

    new Vue({
        el: '.div8',
        data: {
            massage: '点击这里触发自定义方法'
        },
        // 在methods对象中自定义方法
        methods: {
            func2: function () {
                alert('你点到我了 憨批!')
            }
        }
    })

    // 8. v-model 数据绑定
    new Vue({
        el: '.div9',
        data: {
            value: 0
        }
    })


    // 9. 按钮实现字符串反转
    new Vue({
        el: '.div10',
        data: {
            value: 'zyd'
        },
        methods: {
            func3: function () {
                // 这里面this 指向当前的vue实例对象
                this.value = this.value.split('').reverse().join('')
            }
        }

    })

    //  10.过滤器
    new Vue({
        el: '.div11',
        data: {
            value: '123'
        },
        filters: {
            // 这里的value指的是使用过滤器的值
            fif: function (value) {
                return value + 'zyd'
            }
        }
    })

</script>
</html>